import { selectFlagDetail } from "@/lib/features/flag/flagSlice";
import { useAppSelector } from "@/lib/hooks";
import { AddFlagParams } from "@/type/flag";
import computedDayCount from "@/utils/date";
import { unicodeToEmoji } from "@/utils/randomemoji";
import { Accordion, AccordionItem, Button, Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Listbox, ListboxItem, ScrollShadow, } from "@nextui-org/react";
import { redirect, RedirectType } from "next/navigation";


export const ListboxWrapper = ({ children }: { children: React.ReactNode }) => (
    <div className="w-full max-h-max  px-1 py-2">
        {children}
    </div>
);

export default function CompleteFlag({ isOpen, onOpenChange }: { isOpen: boolean, onOpen: () => void, onOpenChange: () => void }) {

    const { flags } = useAppSelector(selectFlagDetail);



    return (
        <>
            <Drawer isOpen={isOpen} onOpenChange={onOpenChange}
                backdrop="blur"
                size="xs"
                motionProps={{
                    variants: {
                        enter: {
                            opacity: 1,
                            x: 0,
                            transition: {
                                duration: 0.3
                            }
                        },
                        exit: {
                            x: 100,
                            opacity: 0,
                            transition: {
                                duration: 0.3
                            }
                        },
                    },
                }}>
                <DrawerContent className="text-white">
                    <>
                        <DrawerHeader className="flex flex-col gap-1">Plan completion</DrawerHeader>
                        <DrawerBody>
                            <ScrollShadow size={50} offset={60}>
                                <ListboxWrapper>
                                    <Listbox
                                        items={flags.filter(v => v.over)}
                                        className="h-full"
                                        selectionMode="none"
                                        variant="flat"
                                    >
                                        {(item: AddFlagParams) => (
                                            <ListboxItem key={item.flag_id} textValue={item.email} showDivider
                                                classNames={{ "wrapper": "" }}
                                            >
                                                <div className="flex gap-2 items-center">
                                                    <Button onPress={() => redirect(`/flag/dashboard/${item.flag_id}`, RedirectType.push)} isIconOnly color="secondary" size="md" radius="md"><span className="text-3xl">{unicodeToEmoji(item.emoji as number)}</span></Button>
                                                    <Accordion>
                                                        <AccordionItem
                                                            key="1"
                                                            subtitle={`StartDate: ${new Date(item.start ?? "").toLocaleDateString().replaceAll('/', '-')}`}
                                                            title={`Period：${computedDayCount(item.start, item.period)} Day`}
                                                        >
                                                            <p className="text-white text-sm font-bold">Description：</p>
                                                            <p className="text-white text-sm text-opacity-50">{item.description}</p>
                                                            <p className="text-white text-sm font-bold mt-2">Checktime: {item.checktime ?? "AnyTime"}</p>

                                                        </AccordionItem>
                                                    </Accordion>
                                                </div>
                                            </ListboxItem>
                                        )}
                                    </Listbox>
                                </ListboxWrapper>
                            </ScrollShadow>

                        </DrawerBody>
                        <DrawerFooter>
                            {/* <Button color="danger" variant="light" onPress={onClose}>
                                    Close
                                </Button> */}
                        </DrawerFooter>
                    </>
                </DrawerContent>
            </Drawer>
        </>
    );
}
